<template>
  <div class="home" STYLE="width: 800PX;margin: 0 auto">
    <div class="content-area">
      <!--  左边  -->
      <div class="left-module" @click="skip">
        <!--   招聘求职    -->
        <!--        <router-link :to="{ name: 'Recruitment' }">-->
        <div class="img"><img src="@/assets/index/chahua.png" alt=""></div>
        <div class="title1">招聘求职</div>

        <!--        </router-link>-->
        <!--        <router-view/>-->
      </div>
      <!--  右边  -->
      <div class="right-module">
        <div class="top">
          <!--  零工超市   -->
          <!-- <div class="supermarket" @click="skip5()">
            <div class="title2">零工超市</div>
          </div> -->
          <!--  快速就业  -->
          <div class="rapid-employment" @click="skip3()">
            <div class="title2">快速就业</div>
          </div>
          <!--  招聘会   -->
          <div class="job-fair">
            <div class="title2" @click="skip2()">招聘会</div>
          </div>
        </div>
        <div class="bottom">
          <!--  家门口就业  -->
          <div class="nearby">
            <div class="title2" @click="skip4()">家门口就业</div>
          </div>
          <!--  政策补贴  -->
          <div class="policy">
            <div class="title2" @click="skip1()">政策补贴</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Title from "@/components/Title.vue";
import Menu from "@/components/Menu.vue";
import {clickStatisticsApi} from "@/api/home";
export default {
  data(){
    return{
      type: '1'
    }
  },
  methods:{
    skip(){
      // 进入页面之后重新给值
      sessionStorage.setItem('currentPage','1');
      this.$router.push({ name: 'Recruitment'})
    },
    skip1(){
      this.$router.push({ name: 'Policy' })
    },
    skip2(){
      this.$router.push({ name: 'Active' })
    },
    skip3(){
      this.$router.push({ name: 'Quick' })
    },
    skip4(){
      this.$router.push({ name: 'Nearby' })
    },
    skip5(){
      this.$router.push({ name: 'Supermarket' })
    },
    clickStatistics() {
      clickStatisticsApi({type:3}).then((res) => {
      }).catch((res) => {
        // console.log(res)
      })
    },
  },
  mounted() {
    this.clickStatistics()
  },
  components:{
    Title,
    Menu
  }
}
</script>

<style lang="scss" scoped>
.content-area{
  //display: flex;
  margin-top: 20px;
  .left-module{
    position: relative;
    width: 100%;
    height: 400px;
    background-color: #FFC04C;
    font-size: 55px;
    color: #ffffff;
    box-sizing: border-box;
    border-radius: 20px;
    padding: 10px 30px;
    margin-top: 70px;
    cursor:pointer;
    .title1{
      font-family: "fzhzgbjianti";
      //width: 100%;
      font-size: 80px;
      color: #fff;
      text-align: center;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 130px;
      //padding: 70px 0 70px;
      //padding-top: 145px;
      text-shadow: 0 2px 5px #5f5f64;
    }
    img{
      position: absolute;
      left: 50px;
      bottom: 60px;
      //width: 310px;
      height: calc((100% - 105px));
      //height: 245px;
    }
  }
  .right-module{
    margin-top: 40px;
    .top{
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      align-items: center;
      //width: 1098px;
      //height: 200px;
      margin-top: 40px;
      //background-color: rosybrown;
      border-radius: 20px;
      //padding: 10px 30px;
      //margin-left: 15px;
      .title2{
        font-family: "fzhzgbjianti";
        color: #Fff;
        font-size: 40px;
        text-align: center;
        line-height: 370px;
        text-shadow: 0 2px 5px #5f5f64;
      }
      .supermarket{
        width: 540px;
        height: 370px;
        background-color: #FF55A2;
        border-radius: 20px;
        cursor:pointer;
        background-image: url("@/assets/index/supermarket.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 70%;
        margin-right: 30px;
      }
      .rapid-employment{
        width: 540px;
        height: 370px;
        background-color: #0DCD7D;
        margin-left: 10px;
        border-radius: 20px;
        cursor:pointer;
        background-image: url("@/assets/index/quick.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 70%;
        margin-right: 30px;
      }
      .job-fair{
        width: 540px;
        height: 370px;
        background-color: #FF8C49;
        margin-left: 10px;
        border-radius: 20px;
        cursor:pointer;
        background-image: url("@/assets/index/active.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 70%;
      }
    }
    .bottom{
      display: flex;
      .title2{
        font-family: "fzhzgbjianti";
        color: #Fff;
        font-size: 50px;
        text-align: center;
        line-height: 400px;
        text-shadow: 0 2px 5px #5f5f64;
      }
      .nearby{
        width: 820px;
        height: 400px;
        background-color: #2F7CFF;
        border-radius: 20px;
        margin: 40px 40px 0 0;
        cursor:pointer;
        background-image: url("@/assets/index/nearby.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 50%;
      }
      .policy{
        width: 820px;
        height: 400px;
        background-color: #BB73FF;
        border-radius: 20px;
        margin: 40px 0 0 0;
        cursor:pointer;
        background-image: url("@/assets/index/recruitment.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 50%;
      }
    }
  }
}
</style>
